<!--通关参数列表-->
<template>
    <div class="customs-data">
        <Row>
            <Col span="3" class="data-type">
            <section>
                <ul>
                    <li v-for="(item, index) in customsBasicDataList" :key="index">
                        <a
                            href="javascript:;"
                            @click="changeCustomsType(item, index)"
                            :class="index === currentIndex ? 'active' : ''"
                        >
                            {{ item.dataMainTypeName }}
                        </a>
                    </li>
                </ul>
            </section>
            </Col>
            <Col span="1" class="interval">
            </Col>
            <Col span="19">
            <section class="data-list">
                <Form v-model="searchData" inline>
                    <div class="search-tips" >{{ basicDataTips }}</div>
                    <FormItem>
                        <Input
                            v-model="searchData.keyWord"
                            :placeholder=" currentDataName + '代码/名称' "
                            @on-keyup="keyWordChange"
                        >
                        </Input>
                        <Input style="display: none"></Input>
                    </FormItem>
                    <FormItem>
                        <Button class="icon-btn" type="primary" @click="searchHandle">搜索</Button>
                    </FormItem>
                </Form>
                <div class="content-body">
                    <Table highlight-row ref="table" :columns="columns" :data="dataList"></Table>
                </div>
                <Pagination
                    :pageSize.sync="searchData.pageSize"
                    :current.sync="searchData.pageNum"
                    :total="total"
                    @change="getData"
                />
            </section>
            </Col>
        </Row>
    </div>
</template>

<script>
import axios from '@/libs/api.request'
const basicDataTips = {
    RATE: '基准货币：美元'
}

export default {
    name: 'CustomsData',
    data () {
        return {
            customsBasicDataList: [
                {
                    dataMainType: 'HSCODE',
                    dataMainTypeName: 'HS商品编码'
                },
                {
                    dataMainType: 'RATE',
                    dataMainTypeName: '汇率'
                }
            ],
            basicDataTips: '',
            currentIndex: 0,
            searchData: {
                keyWord: '',
                dataMainType: '',
                pageNum: 1,
                pageSize: 10
            },
            total: 0,
            dataList: [],
            currentDataName: '',
            columns: [
                {
                    title: '序号',
                    align: 'center',
                    render: (h, params) => {
                        return h('span', params.index + (this.searchData.pageNum - 1) * this.searchData.pageSize + 1)
                    }
                }
            ]
        }
    },

    created () {
        this.getAllCustomsBasicDataVo()
        this.changeCustomsType(this.customsBasicDataList[0], 0)
    },

    methods: {
        async getAllCustomsBasicDataVo () {
            let url = '/ui/commonbasicdata/basicData/getAllCustomsBasicDataVo'
            await axios.request({
                method: 'get',
                url: url
            }).then(res => {
                if (res.data.code === '0000') {
                    this.customsBasicDataList = this.customsBasicDataList.slice(0, 2).concat(res.data.data)
                }
            })
        },
        setColumns (data) {
            const type = data.dataMainType
            let keys = null
            if (type === 'HSCODE') {
                keys = [
                    { title: '商品名称', key: 'goodsName' },
                    { title: '商品编码', key: 'codeTs' },
                    { title: '备注', key: 'remark' }
                ]
            } else if (type === 'RATE') {
                keys = [
                    { title: '外币', key: 'foreignCurrencyName' },
                    { title: '当前汇率', key: 'exchangeRate' }
                ]
            } else {
                const name = data.dataMainTypeName
                keys = [
                    { title: name + '代码', key: 'dataCode' },
                    { title: name + '简称', key: 'shortName' },
                    { title: name + '名称', key: 'dataName' }
                ]
            }
            keys.unshift(this.columns[0])
            this.columns = keys
        },
        getQueryUrl (type) {
            if (type === 'HSCODE') {
                return `/hsCode/getCustomsHsCodeByCode`
            } else if (type === 'RATE') {
                return `/exchangeRate/list`
            }
            return '/ui/commonbasicdata/basicData/getCustomsBasicDataVo'
        },
        changeCustomsType (data, index) {
            this.currentIndex = index
            this.searchData.pageNum = 1
            this.searchData.dataMainType = data.dataMainType
            this.currentDataName = data.dataMainTypeName
            this.setColumns(data)
            this.getData()
            this.basicDataTips = basicDataTips[data.dataMainType] || ''
        },

        searchHandle () {
            this.searchData.pageNum = 1
            this.getData()
        },

        getData () {
            let url = this.getQueryUrl(this.searchData.dataMainType)
            axios.request({
                method: 'post',
                url: url,
                data: this.searchData
            }).then(res => {
                if (res.data.code === '0000') {
                    this.dataList = res.data.data.list
                    this.total = res.data.data.total
                }
            })
        },

        keyWordChange (e) {
            if (!this.searchData.keyWord || e.keyCode === 13) {
                this.searchHandle()
            }
        }
    }
}
</script>

<style lang="less" scoped>
.customs-data {
    padding: 10px;
    border-radius: 4px;
    overflow: hidden;
    background-color: #F2F3F6;

    .data-type {
        min-width: 180px;
        padding: 10px 20px;
        font-size: 14px;
        background-color: #fff;

        a {
            display: inline-block;
            height: 28px;
            color: #383A4A;
            &.active {
                color: #2b85e4;
            }
        }
    }

    .interval {
        min-width: 40px;
        height: 1px;
        background-color: #F2F3F6;
    }

    .data-list {
        padding: 20px 50px 80px 50px;
        background-color: #fff;

        box-sizing: border-box;
        border: none;

        .ivu-form-item {
            margin-bottom: 10px !important;
        }

        .content-footer {
            margin-top: 15px;
            float: right;
        }
    }
}
.search-tips {
    float: right;
    line-height: 32px;
}
@media screen and (max-width: 1336px) {
    .customs-data {
        .data-list {
            padding: 20px 20px 80px 20px;
            border-left: 20px solid #F2F3F6;
        }
    }

    .interval {
        display: none;
    }
}
</style>
